<template>
    <div>
        <!-- 取消订单警告框 -->
        <el-dialog v-model="centerDialogVisible" width="500" align-center id="title">
            <span>确定要取消该订单吗？</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="del_order">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue';
import Link from "../api/Link.js";
import apiurl from "../api/url.js";

//pinia本地化存储用户信息
import { useOrderData } from "../store/OrderData";
import { storeToRefs } from "pinia";
const OrderData = useOrderData();
let { centerDialogVisible } = storeToRefs(OrderData)

//消息框的按钮确定取消
const del_order = async () => {
    console.log(OrderData.orderId);
    await Link(apiurl.order, "DELETE", { orderId: OrderData.orderId },)
        .then((ok: any) => {
            console.log("删除的订单", ok)
            ElMessage({
                showClose: true,
                message: '订单取消成功，退款金额将在2个工作日内原路退回到您的账户',
                type: 'success',
            })
            const message = document.querySelector('.el-message__content')?.parentNode
            //判断提示框的数量   
            if (document.getElementsByClassName('el-message__content').length > 1) {
                setTimeout(function () {
                    message.parentNode.removeChild(message);
                }, 100)
            }
        })
    centerDialogVisible.value = false
    // 订单删除成功后，重新跳转我的订单页面
    router.push({
        path: '/myorder',
    })
}
</script>

<style lang='scss'></style>